<template>
  <div align="center">
    <h2>添加页面</h2>
    <!--切换按钮      -->
    <template>
      类型：
      <el-radio-group v-model="radio">
        <el-radio :label="0">目录</el-radio>
        <el-radio :label="1">菜单</el-radio>
        <el-radio :label="2">按钮</el-radio>
      </el-radio-group>
    </template>
    <!--目录表单      -->
    <el-form v-show="radio===0" ref="formInsert" :rules="rules" :model="formInsert" label-width="80px">
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="formInsert.name" />
      </el-form-item>
      <el-form-item label="上级菜单" prop="parentName">
        <el-input v-model="formInsert.parentName" placeholder="一级菜单" readonly="readonly" @focus="showTree" />
      </el-form-item>
      <el-form-item label="排序号" prop="orderNum">
        <el-input v-model="formInsert.orderNum" />
      </el-form-item>
      <el-form-item label="图标" prop="icon">
        <el-input v-model="formInsert.icon" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="insert">立即创建</el-button>
        <el-button type="primary" @click="resetForm('formInsert')">重置</el-button>
        <el-button type="primary" @click="goBack()">返回</el-button>
      </el-form-item>
    </el-form>
    <!--菜单表单      -->
    <el-form v-show="radio===1" ref="formInsert" :rules="rules" :model="formInsert" label-width="80px">
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="formInsert.name" />
      </el-form-item>
      <el-form-item label="上级菜单" prop="parentName">
        <el-input v-model="formInsert.parentName" placeholder="一级菜单" readonly="readonly" @focus="showTree" />
      </el-form-item>
      <el-form-item label="菜单URL" prop="url">
        <el-input v-model="formInsert.url" />
      </el-form-item>
      <el-form-item label="授权标识" prop="perms">
        <el-input v-model="formInsert.perms" />
      </el-form-item>
      <el-form-item label="排序号" prop="orderNum">
        <el-input v-model="formInsert.orderNum" />
      </el-form-item>
      <el-form-item label="图标" prop="icon">
        <el-input v-model="formInsert.icon" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="insert">立即创建</el-button>
        <el-button type="primary" @click="resetForm('formInsert')">重置</el-button>
        <el-button type="primary" @click="goBack()">返回</el-button>
      </el-form-item>
    </el-form>
    <!--按钮表单      -->
    <el-form v-show="radio===2" ref="formInsert" :rules="rules" :model="formInsert" label-width="80px">
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="formInsert.name" />
      </el-form-item>
      <el-form-item label="上级菜单" prop="parentName">
        <el-input v-model="formInsert.parentName" placeholder="一级菜单" readonly="readonly" @focus="showTree" />
      </el-form-item>
      <el-form-item label="授权标识" prop="perms">
        <el-input v-model="formInsert.perms" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="insert">立即创建</el-button>
        <el-button type="primary" @click="resetForm('formInsert')">重置</el-button>
        <el-button type="primary" @click="goBack()">返回</el-button>
      </el-form-item>
    </el-form>
    <!--父级列表对话框      -->
    <el-dialog
      title="选择菜单"
      :visible.sync="dialogVisible"
      width="30%"
      close-on-press-escape
    >
      <el-tree
        :data="tableData"
        :props="defaultProps"
        :tree-props="{children: 'menuList'}"
        row-key="menuId"
        @node-click="handleNodeClick"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Add',
  data() {
    return {
      radio: 1,
      // 列表
      tableData: [],
      // 树
      defaultProps: {
        children: 'menuList',
        label: 'name'
      },
      formInsert: {},
      // 单选框
      dialogVisible: false,
      rules: {
        name: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        parentName: [
          { required: true, message: '请填写上级菜单', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.parentList()
  },
  methods: {
    // 添加
    insert() {
      if (this.radio > 0) {
        this.formInsert.type = this.radio
      } else {
        this.formInsert.type = 0
        this.formInsert.parentId = 0
      }
      this.axios.post('http://localhost:8091/menu/save', this.formInsert).then(res => {
        if (res.data.code === '200') {
          // alert('添加成功')
          this.$message({
            showClose: true,
            message: '添加成功',
            type: 'success'
          })
          // this.$router.replace({ 'path': '/' })
          this.$router.push('/sys/menu')
        } else {
          this.$message({
            showClose: true,
            message: '添加失败',
            type: 'warning'
          })
        }
      })
    },
    // 重置
    resetForm(formName) {
      this.formInsert = {}
    },
    // 返回
    goBack() {
      // this.$router.replace({ 'path': '/' })
      this.$router.push('/sys/menu')
    },
    // 展示上级菜单
    parentList() {
      this.axios.get('http://localhost:8091/menu/list').then(res => {
        this.tableData = res.data.obj
      })
    },
    // 打开树
    showTree() {
      this.dialogVisible = true
    },
    handleNodeClick(data) {
      this.formInsert.parentId = data.menuId
      this.formInsert.parentName = data.name
      this.formInsert.type = data.type
    }
  }
}
</script>

<style scoped>

</style>
